<template>
	<up-modal class="code-modal" width="580rpx" showCancelButton cancelText="取消校验" confirmText="立即校验"
		confirmColor="#ff0000" :show="show" title="谷歌验证码" @cancel="onCancel()" @confirm="onConfirm()">
		<view class="slot-content">
			<view class="tip">
				请校验您的谷歌验证码
			</view>
			<up-code-input v-model="codeNum" :maxlength="6"></up-code-input>
		</view>
	</up-modal>
</template>

<script>
	export default {
		props: {
			code: {
				type: [String,Number],
				default: ''
			}
		},

		data() {
			return {
				show: false
			}
		},

		computed: {
			codeNum: {
				get: function() {
					return this.code
				},
				set: function(val) {
					this.$emit('update:code', val)
				}
			}
		},
		
		methods:{
			open(){
				this.$emit('update:code', '')
				this.show = true
			},
			
			onCancel(){
				this.show = false
				this.$emit('update:code', '')
			},
			
			onConfirm(){
				if(this.codeNum?.length < 6){
					this.$modal.msg('请输入完整的校验码')
					return false
				}
				
				this.show = false
				this.$emit('success')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.code-modal {
		&::v-deep {
			.u-modal__title {
				font-size: 32rpx;
				color: #000;
			}

			.tip {
				text-align: center;
				color: #666;
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}

			.u-modal__button-group__wrapper--cancel {
				border-right: 1px solid rgba(#d6d7d9, 0.7);

				.u-modal__button-group__wrapper__text {
					color: #999 !important;
				}
			}
		}
	}
</style>